import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import Card from 'lib/components/card.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import DetailScope from './DetailScope.es6'
import moment from 'moment'
import ChartWidget from 'lib/components/ChartWidget.jsx'

class Table extends GridWidget {
  constructor(props){
    super(props)

    this.rowClickHandler = this.rowClickHandler.bind(this);
  }

  rowClickHandler(rowData) {
    location.href = 'interaction#/traces/' + rowData.id + '/' + rowData.timestamp;
  }

  renderRow(rowData,rowIndex){
    return (
      <tr key={rowIndex} className="row-link" onClick={this.rowClickHandler.bind(this, rowData)} style={{'cursor':'pointer'}}>
      {
        this.state.cols.map(function(col,colIndex){
          return this.renderCell(rowData,col,rowIndex,colIndex)
        },this)
      }
      </tr>
    )
  }

  renderCell(rowData,col,rowIndex,colIndex){
    let currentStyle = {};
    if (colIndex === 6) {
      currentStyle.padding = '0px 0px';
    }
    return (
      <td key={colIndex} className={col.className} style={currentStyle}>
      {
        col.render.call(this,
          (!_.isUndefined(rowData[col.key])||!_.isNull(rowData[col.key]))?
            col['formatter'].call(rowData,rowData[col.key]):
            null,
          rowData,
          rowIndex,
          colIndex
        )
      }
      </td>
    )
  }
}

Table.defaultProps = _.extend({}, GridWidget.defaultProps, {
  extraClassName: 'table-layout table-striped no-hover vertical-middle',
  oddColor: false,
  cols: [
    {
      title: '访问时间',
      key: 'timestamp',
      sortable: true,
      formatter: (v) => moment(v).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '流畅度(/s)',
      key: 'sm',
      sortable: true
    },
    {
      title: '耗时(ms)',
      key: 'executeTime',
      sortable: true
    },
    {
      title: '设备型号',
      key: 'modelName',
      sortable: true
    },
    {
      title: 'APP 版本',
      key: 'appVersionName',
      sortable: true
    },
    {
      title: '系统版本',
      key: 'osVersionName',
      sortable: true
    },
    {
      title: 'CPU 利用率',
      key: 'cpu',
      sortable: true,
      width: 130,
      render: (cellValue, rowValue, rowIndex, columnIndex) => {
        if (!cellValue) {
          return null;
        }

        let data = {
          data: {
            yAxis: {
              labels: {
                enabled: false
              },
              endOnTick: false,
              startOnTick: false,
              tickPositions: [0]
            },
            series: [{
              id: 0,
              name: '0',
              data: cellValue.map((item) => {
                return {x: item[0], y: item[1], customData: item};
              })
            }]
          }
        };

        let chartSettings = {
          chart: {
            width: 120,
            backgroundColor: null,
            borderWidth: 0
          },
          legend: {
            enabled: false
          },
          xAxis: {
            labels: {
              enabled: false
            },
            startOnTick: false,
            endOnTick: false,
            tickPositions: []
          }
        };

        let tooltipFormatter = function () {
          return this.point.y;
        }

        return (<ChartWidget height={38} store={data} key={rowIndex} chartSettings={chartSettings} tooltipFormat={tooltipFormatter} />);
      }
    }
  ]
});

export default class DetailView extends View {

  render(){
    return (
      <div className="">
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">

              <Card
                title={
                  <div>
                    {this.state.frameName}&nbsp;至&nbsp;{this.state.frameLastTime}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style={{'color':'red'}}>{this.state.frameCount}次</span>&nbsp;&nbsp;
                    卡顿
                  </div>
                }
                className="widget-float"
                extra={<a className="close iconfont" href="#/">&#xe638;</a>}>
                <div className="pure-g">
                  <div className="pure-u-1">
                    <div className="box">
                      <Card>
                        <Table store={this.state.list} />
                      </Card>
                    </div>
                  </div>
                </div>
              </Card>

            </div>
          </div>
        </div>
      </div>
    )
  }
}

DetailView.defaultProps = {
  Scope: DetailScope
}
